<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link href="/asset/css/admin.css" rel="stylesheet" />
    <style id='panda-theme-color'></style>
</head>
<body   class="theme-panda">
<div>
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 状态下拉单选 -->
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <!-- 下拉单选 -->
                            <select name="status" id="status" lay-verify="" lay-search="" lay-filter="status"><option value="">【请选择状态】</option><option value="1">正常</option><option value="2">禁用</option></select><div class="layui-form-select"><div class="layui-select-title"><input type="text" placeholder="【请选择状态】" value="" class="layui-input"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">【请选择状态】</dd><dd lay-value="1" class="">正常</dd><dd lay-value="2" class="">禁用</dd></dl></div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: auto;">
                            <button class="layui-btn layui-btn-sm layui-btn-primary" lay-submit="" lay-filter="searchForm" id="search"><i class="layui-icon">&#xe615;</i>搜索查询</button>
                            <a class="layui-btn layui-btn-primary layui-btn-sm btnAdd" href="javascript:"  id="add" data-param='[]' lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加角色</a>
                            <a class="layui-btn layui-btn-danger layui-btn-sm btnBatchDrop" href="javascript:"  id="batchDrop" data-param="[]" lay-event="batchDrop"><i class="layui-icon layui-icon-delete"></i>批量删除</a>
                        </div>
                    </div>
                </div>
            </form>

            <!-- 数据表格 -->
            <table class="layui-hide" id="tableList" lay-filter="tableList"></table>

            <!-- 表格操作列 -->
            <script type="text/html" id="toolBar">
                <a class="layui-btn layui-btn-primary layui-btn-xs btnEdit" lay-event="edit" title="编辑"><i class="layui-icon">&#xe630;</i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs btnDel" lay-event="del" title="删除"><i class="layui-icon">&#xe630;</i>删除</a>
                <a href="javascript:" class="layui-btn btnOption layui-bg-cyan layui-btn-xs btnPermission" id="permission" data-param='null' lay-event="permission"><i class="layui-icon layui-icon-set"></i>权限分配</a>
			</script>

            <!-- 状态 -->
            <script type="text/html" id="statusTpl">
                <input type="checkbox" name="status" value="{{ d.id }}" lay-skin="switch" lay-text="正常|禁用" 
					lay-filter="status" {{ d.status == 1 ? 'checked' : '' }} >
            </script>
        </div>
    </div>
</div>
<!-- 引入脚部 -->
<script src="/asset/layui/layui.js?v=1.0.0"></script>
<script src="/asset/js/common.js?v=1.0.0"></script>
<footer>
    <!-- JS部分 -->
    <script type="text/javascript">
        layui.use(['func', 'zTree'], function () {
            //声明变量
            var func = layui.func,
			$ = layui.$,layer = layui.layer;
			
            if (A =='index'){
                //【TABLE列数组】
                var cols = [{type: 'checkbox', fixed: 'left'}
							, {field: 'id', width: 80, title: 'ID', align: 'center', sort: true}
							, {field: 'name', width: 200, title: '角色名称', align: 'center'}
							, {field: 'status', width: 100, title: '状态', align: 'center', templet: '#statusTpl'}
				//			, {field: 'sort', width: 100, title: '排序', align: 'center'}
				//			, {field: 'createUserName', width: 100, title: '添加人', align: 'center'}
							, {field: 'createTime', width: 180, title: '添加时间', align: 'center'}
				//			, {field: 'updateUserName', width: 100, title: '更新人', align: 'center'}
							, {field: 'updateTime', width: 180, title: '更新时间', align: 'center'}
							, {width: 280, title: '功能操作', align: 'center', toolbar: '#toolBar'}];
                     
                //【渲染TABLE】
				func.tableIns(cols, "tableList", function (layEvent, data) {
					
					if (layEvent === 'permission') {
                        layer.open({
							title: '角色权限分配',
							btn: ['保存', '取消'],
                            offset: ['50px','600px'], //宽高
							content: '<ul id="roleAuthTree" class="ztree"></ul>',
							success: function (layero, dIndex) {
								var loadIndex = layer.load(2);
								$.get('getRolePermissionByRoleId', {id: data.id}, function (res) {
									layer.close(loadIndex);
									if (0 === res.code) {
										$.fn.zTree.init($('#roleAuthTree'), {
											check: {enable: true},
											data: {simpleData: {enable: true}}
										}, res.data);
									} else {
										layer.msg(res.msg, {icon: 2});
									}
								}, 'json');
								// 超出一定高度滚动
								$(layero).children('.layui-layer-content').css({'max-height': '300px', 'overflow': 'auto'});
							},
							yes: function (dIndex) {
								var insTree = $.fn.zTree.getZTreeObj('roleAuthTree');
								var checkedRows = insTree.getCheckedNodes(true);
								var ids = [];
								for (var i = 0; i < checkedRows.length; i++) {
									ids.push(checkedRows[i].id);
								}
								func.ajaxPost("setRolePermission", {
									id: data.id,
									auth: ids.join(',')
								}, function (res, success) {
									// 关闭窗体
									layer.close(dIndex);
								});
							}
						});
					}
					
				});

				//【设置弹框】
				func.setWin("系统角色", 500, 350);

				//【设置状态】
				func.formSwitch('status', null, function (data, res) {
					console.log("开关回调成功");
				});
            }
        });

    </script>
</footer>
</body>
</html>